<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
  {
	$(".box").hover(function(){
		$(this).animate({width:"300px"});
		$(this).children().show();
	},function(){
		$(".box").animate({width:"100px"});
		$(".box").children().hide();
	}	
	);
	$(".box").click(function(){
		var content = $(this).children().html();
		$(this).removeClass("box");
		$(this).parent().find(".active").removeClass("active").addClass("box").animate({'width':'100px'}).children().hide();
		$(this).addClass("active");
		$('span').html(content);
	})
});
</script>
<style>
	.active{border:1px solid #000;}
	.box{border:none;}
</style>
</head>
<body>
<div id="box" class="box" style="background:#98bf21;height:100px;width:100px;float:left">
	<p class="name" style="display:none">green</p>
</div>
<div id="box" class="box" style="background:#ff0000;height:100px;width:100px;float:left">
	<p class="name" style="display:none">red</p>
</div>
<div id="box" class="box" style="background:#bbff00;height:100px;width:100px;float:left">
	<p class="name" style="display:none">yellow</p>
</div>
<div id="box" class="box" style="background:#00ffee;height:100px;width:100px;float:left">
	<p class="name" style="display:none">blue</p>
</div>
<p style="clear:both"></p>

</body>
</html>